<template>
  <Panel>
    <template #title>
      账号添加
    </template>
    <template #content>
      <!-- 表单区域 -->
      <el-form
        :model="userReset"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
        size="mini"
      >
        <el-form-item label="原密码" prop="Pass">
          <el-input
            type="text"
            v-model="userReset.Pass"
            autocomplete="off"
            @blur="oldPwd"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input
            type="password"
            v-model="userReset.newPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="redoPass">
          <el-input
            type="password"
            v-model="userReset.redoPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button v-waves type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button v-waves @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
  </Panel>
</template>

<script>
import {
  validatePass,
  validateNewPass,
  validateRedoPass
} from '@/utils/validation'
import { checkoldpwd, editpwd } from '@/api/user'
export default {
  data() {
    return {
      userReset: {
        Pass: '',
        newPass: '',
        redoPass: ''
      },
      rules: {
        Pass: [{ validator: validatePass, trigger: 'blur' }],
        newPass: [
          { validator: validateNewPass('新密码', this), trigger: 'blur' }
        ],
        redoPass: [
          {
            validator: validateRedoPass('确认新密码', this),
            trigger: 'blur'
          }
        ]
      }
    }
  },

  methods: {
    async oldPwd() {
      await checkoldpwd({
        oldPwd: this.userReset.Pass
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const { code } = await editpwd({ newPwd: this.userReset.newPass })
          if (code === 0) {
            setTimeout(() => this.$router.push('/login'), 1500)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.el-input {
  width: 300px;
}
</style>
